<template>
  <el-form-item prop="name" :rules="nameRequiredRule">
    <template #label>
      <span
        >{{ i18nt('designer.setting.uniqueName') }}
        <el-tooltip effect="light" :content="i18nt('designer.setting.editNameHelp')">
          <svg-icon icon-class="el-info"
        /></el-tooltip>
      </span>
    </template>
    <template v-if="!!localSelectedWidget.category || noFieldList">
      <el-input
        type="text"
        v-model="localOptionModel.name"
        :readonly="widgetNameReadonly"
        @change="updateWidgetNameAndRef"
      />
    </template>
    <template v-else>
      <el-select
        v-model="localOptionModel.name"
        allow-create
        filterable
        :disabled="widgetNameReadonly"
        @change="updateWidgetNameAndRef"
        :title="i18nt('designer.setting.editNameHelp')"
      >
        <el-option
          v-for="(sf, sfIdx) in serverFieldList"
          :key="sfIdx"
          :label="sf.label"
          :value="sf.name"
        />
      </el-select>
    </template>
  </el-form-item>
</template>

<script>
import i18n from '@/utils/i18n'
import { isEmptyStr } from '@/utils/util'
import SvgIcon from '@/components/variant-form3/svg-icon/index.vue'
import { reactive, toRefs } from 'vue'
export default {
  name: 'NameEditor',
  components: {
    SvgIcon
  },
  mixins: [i18n],
  inject: ['serverFieldList', 'getDesignerConfig'],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object
  },

  data() {
    return {
      nameRequiredRule: [{ required: true, message: 'name required' }],
      localOptionModel: this.optionModel,
      localSelectedWidget: this.selectedWidget
    }
  },
  computed: {
    noFieldList() {
      return !this.serverFieldList || this.serverFieldList.length <= 0
    },

    widgetNameReadonly() {
      return !!this.getDesignerConfig().widgetNameReadonly
    }
  },

  watch: {
    // Watch for changes in the local model and emit an event to update the parent component
    localOptionModel(newValue) {
      this.$emit('update:optionModel', this.localOptionModel)
    },

    // Also make sure to update the local model if the prop changes externally
    optionModel(newVal) {
      this.localOptionModel = newVal
    },
    localSelectedWidget(newValue) {
      this.$emit('update:selectedWidget', this.localSelectedWidget)
    },

    // Also make sure to update the local model if the prop changes externally
    selectedWidget(newVal) {
      this.localSelectedWidget = newVal
    }
  },
  methods: {
    updateWidgetNameAndRef(newName) {
      let oldName = this.designer.selectedWidgetName
      if (isEmptyStr(newName)) {
        this.localSelectedWidget.options.name = oldName
        ElMessage.info(this.i18nt('designer.hint.nameRequired'))
        return
      }

      if (!!this.designer.formWidget) {
        let foundRef = this.designer.formWidget.getWidgetRef(newName) // 检查newName是否已存在！！
        if (!!foundRef) {
          this.localSelectedWidget.options.name = oldName
          ElMessage.info(this.i18nt('designer.hint.duplicateName') + newName)
          return
        }

        let widgetInDesign = this.designer.formWidget.getWidgetRef(oldName)
        if (!!widgetInDesign && !!widgetInDesign.registerToRefList) {
          widgetInDesign.registerToRefList(oldName) //注册组件新的ref名称并删除老的ref！！
          let newLabel = this.getLabelByFieldName(newName)
          this.designer.updateSelectedWidgetNameAndLabel(
            this.localSelectedWidget,
            newName,
            newLabel
          )
        }
      }
    },

    getLabelByFieldName(fieldName) {
      for (let i = 0; i < this.serverFieldList.length; i++) {
        if (this.serverFieldList[i].name === fieldName) {
          return this.serverFieldList[i].label
        }
      }

      return null
    }
  }
}
</script>

<style lang="scss" scoped></style>
